<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>曼巴精神，虽走尤荣</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <style>
		.carousel{
			width: 50%;
			margin: 0 auto;
		}
		h1{
			
			text-align: center;
			background-image: linear-gradient(to right, red , yellow);
		}
		
    </style>
</head>
<body>
	<div class="container">
		<h1>曼巴精神，虽走尤荣</h1>
	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
	  <ol class="carousel-indicators">
	    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
	    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
	    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
	  </ol>
	  <div class="carousel-inner" role="listbox">
	    <div class="item active">
	      <img src="../img/11.jpg" alt="..." style="width: 100%; width: 570px; height: 380px;">
	      </div>
	    <div class="item">
	      <img src="../img/22.jpg" alt="..." style="width: 100%; width: 570px; height: 380px;">
	      </div>
		<div class="item">
		  <img src="../img/33.jpg" alt="..." style="width: 100%; width: 570px; height: 380px;">
		  </div>
	    </div>
	  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
	    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	    <span class="sr-only">Previous</span>
	  </a>
	  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
	    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	    <span class="sr-only">Next</span>
	  </a>
	</div>
	</div>
    <script src="../js/jquery-3.4.1.js"></script>
    <script src="../js/bootstrap.js"></script>
</body>
</html>